﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>서서히 보이기 및 숨기기</title>

    <style type="text/css">
        #my .hover
        {
        cursor:pointer;
        background-color:Yellow;
        }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

        	$(".region").show();
        	$("#moreRegion").hide();
        	
        	$("span.more").click(function(){
        		
        		$("#moreRegion").show('slow');
        		$(this).hide('fast');
        	});

        });
    </script>

</head>

<body>

<div class="region" style="display:none;">
안녕하세요. 여기는 본문입니다.
<span class="more">more...</span>
</div>

<div id="moreRegion" style="height:100px;background-color:Yellow;">
또 만나요
</div>

</body>

</html> 

